<template>
  <p>name: {{user.name}}</p>
  <p>address: {{user.address}}</p>

  <button @click="updateNameAndAddress">修改 name 和 address</button>
</template>

<script>
import { reactive, ref } from 'vue'

export default {
  setup() {
    /* let user = reactive({ name: 'ifer', address: '河南' })

    const updateNameAndAddress = () => {
      // user.name = '谈啸'
      // user.address = '武汉青山'
      // !下面写法不是响应式的，因为 user 脱离了原来的响应式环境，变成了一个普普通通的对象了
      user = { name: '谈啸', address: '武汉青山' }
    }
    return { user, updateNameAndAddress }  */


    const user = ref({ name: 'ifer', address: '河南' })

    const updateNameAndAddress = () => {
      // user.value.name = '谈啸'
      // user.value.address = '武汉青山'

      // !下面写法也是 ok 的，赋值的新对象没有脱离原来的 user
      user.value = { name: '谈啸', address: '武汉青山' }
    }
    return { user, updateNameAndAddress } 
  }
}
</script>